import React from 'react';
import videojs from 'video.js';
import flvjs from 'flv.js'
import 'video.js/dist/video-js.css'
import {Toast} from "antd-mobile";
import VideoHint from "./video_hint";

class VideoPlayer extends React.Component {

    constructor(props) {
        super(props)
        this.playerId = 'id-h5-player'
        this.state = {
            type: '',
            player: null,
        }
    }

    componentDidMount() {
        const src = this.props.videoSrc

        this.setPlayer(src)

        // const isFlv = src.includes('flv')
        // if (isFlv) {
        //     this.setFlvJs()
        // } else {
        //     this.setVideoJs()
        // }

    }

    setPlayer(src) {
        const isHls = src.includes('m3u8')
        const isFlv = src.includes('flv')
        console.log('isHls', isHls)
        console.log('isFlv', isFlv)
        if (isHls) {
            this.setVideoJs()
        } else if (isFlv) {
            this.setFlvJs()
        }
    }


    setFlvJs() {
        this.setState({
            type: 'flv',
        })
        if (flvjs.isSupported()) {
            let player = flvjs.createPlayer({
                type: 'flv',
                url: this.props.videoSrc,
                // url: 'https://live.kfbdnkyy.com/live/sd-2-3571618.flv?auth_key=1606879264-0-0-663f08630f33486746ca2db3ef6de500'
            })
            this.setState({
                player: player,
            }, () => {
                player.attachMediaElement(this.videoTag)
                player.load()
                player.play()

            })

        } else {
            // Toast.fail('不支持')
            this.infoError()
        }
    }

    setVideoJs() {
        let component = this
        let player = videojs(this.videoTag, {
            autoPlay: true,
            controls: true,
        }, function ready() {
            this.on("error", function() {
                component.infoError()
            })
        })

        this.setState({
            type: 'm3u8',
            player: player,
        }, () => {
            player.controls(true)
            player.height(220)
            player.width(window.innerWidth)
            player.src(this.props.videoSrc)
        })
        // this.player.src('ddd')
    }

    infoError(type) {
        Toast.info(<div>
            <p>请下载客户端</p>
            <p>观看比赛直播</p>
        </div>)
        this.destroyPlayer()
        this.props.destroyPlayer()
    }

    destroyPlayer() {
        let type = this.state.type
        let player = this.state.player
        if (player) {
            if (type === 'm3u8') {
                this.state.player.dispose()
            } else if (type ==='flv') {
                let player = this.state.player
                player.pause()
                player.unload()
                player.detachMediaElement()
                player.destroy()
            }
        }

    }

    componentWillUnmount() {
        this.destroyPlayer()
    }

    render() {

        return <div style={{position: 'relative',}}>
            <div id="id-h5-player"/>
            <div data-vjs-player>
                <video
                    ref={el => this.videoTag = el}
                    autoPlay
                    className='video-js'
                    playsInline={true}
                    webkit-playsinline={''}
                    x5-playsinline={''}
                    x-webkit-airplay='allow'
                    controls={this.state.flv}
                    style={{
                        height: '220px',
                        width: '100%',
                    }}
                />
            </div>
            <div
                style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    width: '100%',
                }}
            >
                <VideoHint />
            </div>
        </div>
    }
}

export default VideoPlayer
